<template>
    <div class="common-table-wrap">
        
        <!-- v-if="loading || total" -->
        <div>
            <div v-if="!hideHeader" class="table-header">
                {{ title }}（{{ total }}）

                <div style="float: right;">
                    <slot name="headerRight"></slot>
                </div>
            </div>
            
            <TableContent
                class="common-table-content"
                v-if="noSelection"
                :table-data="tableData"
                :loading="loading"
                :table-key="tableKey">
                <slot></slot>
            </TableContent>

            <slot v-else></slot>
    
           <div class="fr">
               <pagination
                :total="total" 
                :page-size="pageSize"
                :current-page="pageIndex"
                :layout="layout"
                :page-sizes="pageSizes"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
           </div>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/pagination/pagination.vue';
import TableContent from './table-content.vue';

export default {
    name: 'table-wrap',
    components: {
        Pagination,
        TableContent
    },
    props: {
        // 标题
        title: String,
        // 总数
        total: Number,
        pageSize: Number,
        pageIndex: Number,
        // loading 状态
        loading: Boolean,
        // 是否隐藏标题
        hideHeader: Boolean,
        // 空数据显示文案
        noDataText: {
            type: String,
            default: '暂无数据'
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 20, 50]
            }
        },
        tableData: {
            type: Array,
            default: () => []
        },
        tableKey: { // 表格如果在tabs下，刷新表格需要更新tableKey,否则会抖动
            type: String,
            default: 'r'
        },
        noSelection: { // 没有复选框
            type: Boolean,
            default: true
        }
    },
    emits: ['update:pageSize', 'update:pageIndex', 'request-list'],
    setup (props, context) {

        // 改变 pageSize
        function handleSizeChange(pageSize) {
            context.emit('update:pageSize', pageSize)
            context.emit('update:pageIndex', 1)
            context.emit('request-list')
        }

        // 改变 pageIndex
        function handleCurrentChange(pageIndex) {
            context.emit('update:pageIndex', pageIndex)
            context.emit('request-list')
        }

        return {
            handleSizeChange,
            handleCurrentChange,
            props
        }
    }
}
</script>

<style lang="scss" scoped>
.fr {
    display: flex;
    justify-content: flex-end;
}
</style>
